import {
	Primary,
	Controls,
	Stories,
	Meta,
	ArgTypes,
} from '@storybook/addon-docs/blocks';

import * as FieldBaseAutosuggestStories from './FieldBaseAutosuggest.stories.js';

<Meta of={FieldBaseAutosuggestStories} />

# FielBaseAutosuggest

## Usage

This is a base component and should not be used directly. Instead, create a new component that extends `FieldBaseAutosuggest` to create an autosuggest field.

Every component that extends `FieldBaseAutosuggest` must provide a `setSuggestions` method which will convert the API response to a suggestion.

```js
import FieldBaseAutosuggest from './FieldBaseAutosuggest.vue';

export default {
	extends: FieldBaseAutosuggest,
	methods: {
		setSuggestions(newItems) {
			this.suggestions = newItems.map((item) => {
				return {
					value: item.id,
					label: item.title,
				};
			});
		},
	},
};
```

The `value` is submitted with the form.

## Inline Labels

Do not use `isLabelInline` unless a designer has recommended this approach. A form that uses inline labels should be designed specifically to support them.

## Implementations

The following autosuggest fields are available to be used.

- `FieldAutosuggestPreset` can be used to when the options can be preset instead of requiring a request to the REST API.
- `FieldControlledVocab` can be used to enter metadata such as keywords and subjects.
- `FieldSelectSubmissions` can be used to find and select submissions.

## Customizing options

The component allows for flexible customization of its options through named slots. This lets you control how suggestions are displayed and interact within the options. See [Custom Options](?path=/story/forms-fieldbaseautosuggest--custom-options) for sample implemenation.

### Named Slots

- `input-slot`: Customizes the input area of the combobox.
- `option`: Defines how each suggestion is rendered in the dropdown.

<Primary />
<Controls />
